<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /* 定义一个名为 backgroundColor 的样式类，用于设置元素的背景颜色为黄色 */
      .backgroundColor{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 动态绑定图片的 src 属性和 alt 属性 -->
        <img :src="imgSrc2" :alt="alt" />
        <!-- 动态设置段落的文字颜色 -->
        <p :style="{color:fontColor}">今天天气真好</p>
        <!-- 根据 isActive 的值动态应用 backgroundColor 样式类 -->
        <p :class="{backgroundColor:isActive}">今天天气真好啊！</p>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        /* 创建一个 Vue 实例 */
        var vm = new Vue({
            el: "#app",  // 指定 Vue 实例挂载的元素
            data: {  // 定义数据
                imgSrc2: "img/bear.jpg",  // 图片路径
                alt: "我是图片说明",  // 图片说明
                fontColor: "red",  // 文字颜色
                backgroundColor: "red",  // 背景颜色
                isActive: true  // 是否应用背景颜色样式
            }
        })
    </script>
</body>
</html>